<template>
	<view class="daily-menu">
		<!-- 日期 -->
		<view class="daily-menu-date">每日菜单（{{ date }}）</view>

		<!-- 菜单 -->
		<view class="row">
			<view class="row-label">菜单：</view>
			<uni-data-select
				class="row-selector"
				v-model="menuTypeId"
				:localdata="menuTypes"
				:clear="false"
				@change="onMenuTypeChange"
			></uni-data-select>
		</view>

		<!-- 3菜1汤菜品 -->
		<view v-if="menuTypeId === 1">
			<DishSelector
				v-model="selectedDishIds[DishTypeId.HeavyMeat]"
				label="大荤"
				:dish-type-id="DishTypeId.HeavyMeat"
				:options="heavyDishes"
			></DishSelector>
			<DishSelector
				label="小荤"
				v-model="selectedDishIds[DishTypeId.HalfMeat]"
				:dish-type-id="DishTypeId.HalfMeat"
				:options="halfDishes"
			></DishSelector>
			<DishSelector
				label="素菜"
				v-model="selectedDishIds[DishTypeId.Vegetable]"
				:dish-type-id="DishTypeId.Vegetable"
				:options="vegetables"
			></DishSelector>
			<DishSelector
				label="汤品"
				v-model="selectedDishIds[DishTypeId.Soup]"
				:dish-type-id="DishTypeId.Soup"
				:options="soups"
			></DishSelector>
		</view>

		<!-- 面条菜品 -->
		<view v-if="menuTypeId === 2">
			<DishSelector
				label="面条"
				v-model="selectedDishIds[DishTypeId.Noodle]"
				:dish-type-id="DishTypeId.Noodle"
				:options="noodles"
			></DishSelector>
		</view>

		<view class="submit-btns">
			<button
				class="submit-btn"
				type="primary"
				plain
				@tap="navigateBack"
			>
				取消
			</button>
			<button
				class="submit-btn"
				type="primary"
				@tap="handleCreateDailyMenu"
			>
				添加
			</button>
		</view>
	</view>
</template>

<script>
import { DISH_TYPE_ID, MENU_TYPE_ID } from '../../apis/config.js';
import { getMenuTypes } from '../../apis/menuType.js';
import { getDishesByDishTypeId } from '../../apis/dish.js';
import { getDailyMenuDishes, updateDailyMenuById } from '../../apis/dailyMenu.js';

// function createDishes(dishTypeName = '大荤', dishTypeId = 1) {
// 	const dishes = [];
// 	for (let i = 0; i < 100; i++) {
// 		dishes.push({
// 			id: i + 1,
// 			name: '红烧肉' + (i + 1),
// 			dishTypeId: dishTypeId,
// 			dishType: dishTypeName,
// 			description: '红烧肉红烧肉红烧肉红烧肉',
// 			imageUrl: 'https://puui.qpic.cn/vpic/0/p3155jitdua.png/0',
// 			score: 3.8,
// 			scoreCount: 32,
// 		});
// 	}
// 	return dishes;
// }

export default {
	// props: {
	// 	date: { type: String, default: new Date().toLocaleDateString('zh-CN') },
	// },
	data() {
		return {
			DishTypeId: DISH_TYPE_ID,

			modelValue: null,

			// 今日菜单日期
			date: '',
			// 菜品分类选择
			menuTypeId: 1,
			// 今日菜单id
			dailyMenuId: 0,
			// 3菜1汤
			menuTypes: [],

			// 分类下可选择的菜品
			// heavyDishes: createDishes(),
			heavyDishes: [],
			halfDishes: [],
			vegetables: [],
			soups: [],
			noodles: [],
			// 选择的菜品
			selectedDishIds: [],
		};
	},
	created() {
		// 获取菜单分类 3菜1汤 面条
		getMenuTypes().then((data) => {
			// console.log('getMenuTypes', data);
			this.menuTypes = data;
		});

		// 获取 大荤 小荤 素菜 汤品 面条 下的所有菜品
		this.getDishesAll();
	},
	onLoad(e) {
		// console.log('路由', e);
		// 路由获取日期
		this.date = e.date || new Date().toLocaleDateString('zh-CN');
		this.menuTypeId = parseInt(e.menuTypeId) || 0;
		this.dailyMenuId = parseInt(e.dailyMenuId) || 0;

		// 根据日期获取今日菜单菜品，设置菜品分类默认值
		this.setDefaultDishes();
	},
	onShow() {
		this.getDishesAll();
	},
	methods: {
		// 创建今日菜品
		handleCreateDailyMenu() {
			const valid = this.validateForm();
			if (!valid) return;

			const data = {
				id: this.dailyMenuId,
				date: this.date,
				menuTypeId: this.menuTypeId,
				dishIds: [],
			};

			// console.log('data', data);
			// return;

			// 3菜1汤
			if (this.menuTypeId === MENU_TYPE_ID.Dishes4) {
				data.dishIds = [
					this.selectedDishIds[DISH_TYPE_ID.HeavyMeat],
					this.selectedDishIds[DISH_TYPE_ID.HalfMeat],
					this.selectedDishIds[DISH_TYPE_ID.Vegetable],
					this.selectedDishIds[DISH_TYPE_ID.Soup],
				];
			} else if (this.menuTypeId === MENU_TYPE_ID.Noodle) {
				//面条
				data.dishIds = [this.selectedDishIds[DISH_TYPE_ID.Noodle]];
			}

			// console.log('data', data);
			// return;
			uni.showLoading({
				title: '保存',
			});
			// 发送请求
			updateDailyMenuById(data)
				.then((res) => {
					// console.log('发送请求', res);
					this.navigateBack();
				})
				.catch(() => {
					uni.hideLoading();
					uni.showToast({
						title: '保存失败',
						icon: 'error',
					});
				})
				.finally(() => uni.hideLoading());
		},
		onMenuTypeChange() {
			// 重置已选择的菜品
			// this.selectedDishIds = [];
		},
		// 根据日期获取今日菜单菜品，设置菜品分类默认值
		setDefaultDishes() {
			// 获取今日菜品
			getDailyMenuDishes(this.date).then((res) => {
				// console.log('获取今日菜品', res);
				const dishes = res.dishes;
				// console.log(
				// 	'dish',
				// 	dishes.find((ds) => ds.dishTypeId === DISH_TYPE_ID.HalfMeat)
				// );
				// 遍历今日菜品，根据菜品分类大荤找到，大荤菜品， 设置默认大荤为大荤菜品id
				this.selectedDishIds[DISH_TYPE_ID.HeavyMeat] = dishes.find((ds) => ds.dishTypeId === DISH_TYPE_ID.HeavyMeat)?.id || null;
				this.selectedDishIds[DISH_TYPE_ID.HalfMeat] = dishes.find((ds) => ds.dishTypeId === DISH_TYPE_ID.HalfMeat)?.id || null;
				this.selectedDishIds[DISH_TYPE_ID.Vegetable] = dishes.find((ds) => ds.dishTypeId === DISH_TYPE_ID.Vegetable)?.id || null;
				this.selectedDishIds[DISH_TYPE_ID.Soup] = dishes.find((ds) => ds.dishTypeId === DISH_TYPE_ID.Soup)?.id || null;
				this.selectedDishIds[DISH_TYPE_ID.Noodle] = dishes.find((ds) => ds.dishTypeId === DISH_TYPE_ID.Noodle)?.id || null;
			});
		},
		// 设置所有分类下拉选择器下的菜品
		getDishesAll() {
			uni.showLoading({
				title: '',
			});
			Promise.all([
				// 大荤
				//小荤 //素菜 //汤品 //面条
				getDishesByDishTypeId(DISH_TYPE_ID.HeavyMeat),
				getDishesByDishTypeId(DISH_TYPE_ID.HalfMeat),
				getDishesByDishTypeId(DISH_TYPE_ID.Vegetable),
				getDishesByDishTypeId(DISH_TYPE_ID.Soup),
				getDishesByDishTypeId(DISH_TYPE_ID.Noodle),
			])
				.then((res) => {
					// console.log('getDishesAll res', res);
					this.heavyDishes = res[0];
					this.halfDishes = res[1];
					this.vegetables = res[2];
					this.soups = res[3];
					this.noodles = res[4];
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		validateForm() {
			// 如果3菜1汤
			if (this.menuTypeId === MENU_TYPE_ID.Dishes4) {
				return this.validateDishes4();
			} else if (this.menuTypeId === MENU_TYPE_ID.Noodle) {
				// 面条
				return this.validateNoodle();
			} else {
				uni.showToast({
					title: '错误的菜单类型',
					icon: 'error',
				});
				return false;
			}
		},
		// 校验3菜1汤
		validateDishes4() {
			let title = '';

			const hasHeavyDishId = this.selectedDishIds[DISH_TYPE_ID.HeavyMeat];
			const hasHalfDishId = this.selectedDishIds[DISH_TYPE_ID.HalfMeat];
			const hasVegetableId = this.selectedDishIds[DISH_TYPE_ID.Vegetable];
			const hasSoupId = this.selectedDishIds[DISH_TYPE_ID.Soup];

			if (!hasHeavyDishId) {
				title = '没有大荤菜';
			} else if (!hasHalfDishId) {
				title = '没有小荤菜';
			} else if (!hasVegetableId) {
				title = '没有素菜';
			} else if (!hasSoupId) {
				title = '没有汤品';
			}

			if (title) {
				uni.showToast({
					title,
					icon: 'error',
				});
				return false;
			}
			return true;
		},
		// 校验面条
		validateNoodle() {
			let title = '';

			const hasNoodleId = this.selectedDishIds[DISH_TYPE_ID.Noodle];
			if (!hasNoodleId) {
				title = '没有面条';
			}

			if (title) {
				uni.showToast({
					title,
					icon: 'error',
				});
				return false;
			}

			return true;
		},
		navigateBack() {
			uni.navigateBack();
		},
	},
};
</script>

<style scoped>
.daily-menu {
	padding: 24rpx;
}

.daily-menu-date {
	margin-bottom: 26rpx;
	color: #1b1b1b;
	font-weight: bold;
}

.row {
	display: flex;
	align-items: center;
	/* margin-bottom: 12rpx; */
}

.row-selector {
	width: 601rpx;
}

.row-label {
	font-size: 18px;
	font-weight: bold;
	color: #1b1b1b;
}

.submit-btns {
	display: flex;
	gap: 64rpx;
	margin: 64rpx 0;
}

.submit-btn {
	margin: 0;
	flex: 1;
}
</style>
